<template>
  <n-config-provider id="body w-full" :theme-overrides="naiveTheme">
    <module-header name="app" value="/doctor" is-telescreen />

    <main-content>
      <n-space v-if="state==0" vertical class="w-3/5">
        <div class="flex justify-between items-center">
          <div v-if="colState==0" class="text-xl text-white">当前的治疗项目</div>
          <div v-if="colState==1" class="text-xl text-white">开启新的项目</div>
          <n-button v-if="colState==0" type="primary" @click="colState=1">前往开启新的项目</n-button>
          <n-button v-if="colState==1" type="primary" @click="colState=0">查看当前的治疗项目</n-button>
        </div>

        <n-data-table v-if="colState==0" size="large"
                      :columns="columns"
                      :data="viewData"
                      :pagination="pagination"
                      :single-line="false"
        />
        <n-data-table v-if="colState==1" size="large"
                      :columns="columns2"
                      :data="viewData2"
                      :pagination="pagination"
                      :single-line="false"
        />
      </n-space>
      <div v-if="state==1" class="w-3/5 flex justify-center " style="box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
                  background-color: white;overflow: auto;border-radius: 5px;"
      >
        <n-button class="mt-2" @click="state=0">返回</n-button>
        <n-space vertical class="mt-12">
          <n-steps vertical :current="(current as number)" :status="currentStatus">
            <n-step v-for="(item,i) in ProcessRef.items" :key="i" :title="item.name" style="max-width: 50vw;">
              <strong>医生:</strong> {{ item.doctor }}
              <strong>地点:</strong> {{ item.therapyAddress }}
              <strong>日期:</strong> {{ ProcessRef.startTime }}
              <strong>间隔时间:</strong> {{ item.intervalTime }}
            </n-step>
          </n-steps>
        </n-space>
      </div>
    </main-content>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { ref, h, reactive, onMounted } from 'vue'
import { naiveTheme } from '../../shared/theme/naive_theme'
import { NConfigProvider, NDataTable, NSpace, NButton,
  DataTableColumns, StepsProps, NSteps, NStep } from 'naive-ui'
import { axiosReq } from '../../shared/client/axios'
import { actErr } from '../../shared/client/interact'
import ModuleHeader from '../../components/common/module_header.vue'
import MainContent from '../../components/common/main_content.vue'
import { reqGetBeginItems } from './doctor.def'

const state = ref<number>(0)
const colState = ref<number>(0)

type RowData = {
  key: number
  patientName: string
  iName: string
  therapyAddress: string
  finishTime: string
  intervalTime: string
  num: number,
  prId: number
}

const createColumns = ({
  operate
}: {
  operate: (event,rowData: RowData) => void
}): DataTableColumns<RowData> => {
  return [
    {
      title: '病人姓名',
      key: 'patientName'
    },
    {
      title: '治疗项目',
      key: 'iName'
    },
    {
      title: '治疗地点',
      key: 'therapyAddress'
    },
    {
      title: '完成时间',
      key: 'finishTime'
    },
    {
      title: '间隔时间',
      key: 'intervalTime'
    },
    {
      title: '操作',
      key: 'actions',
      render (row) {
        return buttons.map((item, index) => (
          h(
            NButton,
            {
              size: 'small',
              'type': item.type,
              class: 'mr-2',
              key: index, // 添加唯一的 key，通常使用数组索引作为 key
              onClick: () => operate(event,row),
            },
            { default: () => item.label },
          )
        ))
      }
    }
  ]
}

const createColumns2 = ({
  operate
}: {
  operate: (event,rowData: RowData) => void
}): DataTableColumns<RowData> => {
  return [
    {
      title: '病人姓名',
      key: 'patientName'
    },
    {
      title: '治疗项目',
      key: 'iName'
    },
    {
      title: '治疗地点',
      key: 'therapyAddress'
    },
    {
      title: '完成时间',
      key: 'finishTime'
    },
    {
      title: '间隔时间',
      key: 'intervalTime'
    },
    {
      title: '操作',
      key: 'actions',
      render (row) {
        return buttons2.map((item, index) => (
          h(
            NButton,
            {
              size: 'small',
              'type': item.type,
              class: 'mr-2',
              key: index, // 添加唯一的 key，通常使用数组索引作为 key
              onClick: () => operate(event,row),
            },
            { default: () => item.label },
          )
        ))
      }
    }
  ]
}

const buttons = [
  { label:'异常', type:'error' },
  { label:'结束', type:'success' }
]

const buttons2 = [
  { label:'开启', type:'success' }
]

const columns = createColumns({
  operate (event,rowData) {
    if(event.target.innerText === '异常') {
      console.log(rowData)
    } else if(event.target.innerText === '结束') {
      console.log(rowData)
    }
  }
})
const columns2 = createColumns2({
  operate (event,rowData) {
    if(event.target.innerText === '开始') {
      console.log(rowData)
    }
  }
})

const viewData = ref<RowData[]>([])
const viewData2 = ref<RowData[]>([])

const pagination = {
  pageSize: 10
}

onMounted(async () => {
  if(!import.meta.env.SSR) {
    const res1 = await reqGetBeginItems(axiosReq)
    viewData.value = res1.data
    console.log(viewData.value)
  }
})

</script>

<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
